import React, { useState,useEffect } from 'react';
import { Form, Table, Pagination, Balloon, Icon, Dialog, Slider,Grid, DatePicker, Select, Input } from '@alifd/next';
const FormItem = Form.Item;
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
const { Row, Col } = Grid;
import IceContainer from '@icedesign/container';
import styles from './index.module.scss';
import { useRequest } from '@/utils/request';
import { orderList,auditOrder } from '@/config/dataSource';
import TableFilter from "./TableFilter";
import Zmage from 'react-zmage'

export default function Home() {
  const { request } = useRequest(orderList);
  const { request:requestAuditOrder  } = useRequest(auditOrder);
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState(0);
  const [filter, setFilter] = useState({
    outerid:'',
    status:''
  });
  const [visible, setVisible] = useState(false);
  const [shouldUpdatePosition] = useState(true);
  const [dataSource, setData] = useState([]);
  const [id, setId] = useState('');
  const [value] = useState({
    remark:''
  });

  const formChange = (formValue) => {
    console.error(formValue);
  };

  const submitBT = (formValue) => {
    if (!formValue.remark) {
      return;
    }
    async function audit() {
      try {
        await requestAuditOrder({
          data: {id:id,status:5,remark:formValue.remark},
        });
        setVisible(false);
        getList();
      } catch (err) {
      }
    }
    audit();
  };


  useEffect(() => {
    getList();
  },[current,filter]);

  const getList = (currPage) => {
    async function getData() {
      try {
        const rsp = await request({
          data: {currPage:currPage?currPage:current,...filter},
        });
        setData(rsp.data.obj.list);
        setTotal(rsp.data.obj.totalCount);
      } catch (err) {
      }
    }
    getData();
  };

  const handleFilterChange = (filter) => {
    let newfilter = {...filter}
    setFilter(newfilter);
  };

  const handlePagination = (current) => {
    setCurrent(current);
  };
  const handlerAudit = (id,status) => {
    if (status == 5) {
      setId(id);
      setVisible(true);
      return;
    }
    async function audit() {
      try {
        await requestAuditOrder({
          data: {id:id,status:status},
        });
        getList();
      } catch (err) {
      }
    }
    Dialog.confirm({
      title: '确认',
      content: '确认执行该操作！',
      onOk: () => audit()
    });
  };
  const onClose = () => {
    setVisible(false);
  };
  const handleDetailImg = (record) => {
    const swiperItem = [];
    if (record.order.img1) {
      swiperItem.push({src:record.order.img1});
    }
    if (record.order.img2) {
      swiperItem.push({src:record.order.img2});
    }
    if (record.order.img3) {
      swiperItem.push({src:record.order.img3});
    }
    if (record.order.img4) {
      swiperItem.push({src:record.order.img4});
    }
    if (record.order.img5) {
      swiperItem.push({src:record.order.img5});
    }
    if (record.order.img6) {
      swiperItem.push({src:record.order.img6});
    }
    if (record.order.img7) {
      swiperItem.push({src:record.order.img7});
    }

    if (record.order.img8) {
      swiperItem.push({src:record.order.img8});
    }
    if (record.order.otherimg) {
      let imgs = record.order.otherimg.split(',');
      imgs.forEach(function(item) {
        swiperItem.push({src:item});
      })
    }
    Zmage.browsing({ set:swiperItem,preset:'auto'})
  };

  const renderState = (value) => {
    let statusDom;
    if (value == 0) {
      statusDom = <span style={{color:'#ff976a'}}>待鉴定</span>
    } else if (value == 1) {
      statusDom = <span style={{color:'#07c160'}}>鉴定为真</span>
    } else if (value == 2) {
      statusDom = <span style={{color:'#ee0a24'}}>鉴定为假</span>
    } else if (value == 3) {
      statusDom = <span style={{color:'#ee0a24'}}>非鉴别范围</span>
    } else if (value == 4) {
      statusDom = <span style={{color:'#ee0a24'}}>图片质量过低</span>
    } else if (value == 5) {
      statusDom = <span style={{color:'#f68a03'}}>等待用户补充图片</span>
    }
    return (
      <div>
        {statusDom}
      </div>
    );
  };

  const renderOper = (value, index, record) => {
    if (value != 0) {
      return;
    }
    return (
      <div style={{textAlign:'left'}}>
        <div>
          <span onClick={()=>{handlerAudit(record.order.id,1)}} style={{cursor:'pointer',color:'#5485f7'}}>鉴定为真</span>
          <span onClick={()=>{handlerAudit(record.order.id,2)}} style={{color:'#5485f7',cursor:'pointer',marginLeft:'20px'}}>鉴定为假</span>
          <span onClick={()=>{handlerAudit(record.order.id,3)}} style={{color:'#5485f7',cursor:'pointer',marginLeft:'20px'}}>非鉴别范围</span>
        </div>
        <div style={{marginTop:'10px'}}>
          <span onClick={()=>{handlerAudit(record.order.id,4)}} style={{color:'#5485f7',cursor:'pointer'}}>图片质量过低</span>
          <span onClick={()=>{handlerAudit(record.order.id,5)}} style={{color:'#5485f7',cursor:'pointer',marginLeft:'20px'}}>需补充图片</span>
        </div>
      </div>
    );
  };

  const renderDetailImg = (value, index, record) => {
    return (
      <div>
        <div className={styles.detailPic} onClick={() => handleDetailImg(record)}>查看图片</div>
      </div>
    );
  };

  const renderUserInfo = (value, index, record) => {
    return (
      <div style={{textAlign:'center'}}>
        <div><img src={record.customer.headurl} style={{width:'60px',height:'60px',borderRadius:'100%'}} alt=""/></div>
        <div>{record.customer.nickname}</div>
        <div style={{fontSize:'12px'}}>鉴定次数:{record.appriCount}</div>
      </div>
    );
  };

  const renderUserAddr = (value, index, record) => {
    return (
      <div>
        <div>{record.customer.province}{record.customer.city}</div>
      </div>
    );
  };

  return (
    <div>
      <Dialog title="备注"
              footer={false}
              visible={visible}
              onCancel={onClose}
              onClose={onClose}
              shouldUpdatePosition={shouldUpdatePosition}>
        <Form value={value} onChange={formChange}>
          <FormItem required requiredMessage="必填" className={styles.formItem}>
            <Input.TextArea
              name="remark"
              placeholder="补图原因说明"
            />
          </FormItem>

          <Row className={styles.formItem}>
            <Form.Submit
              type="primary"
              validate
              onClick={submitBT}
              className={styles.submitBtn}
            >
             确定
            </Form.Submit>
          </Row>
        </Form>
      </Dialog>
      <TableFilter onChange={handleFilterChange} />
      <div className={styles.tableContainer}>
        <Table
          dataSource={dataSource}
          hasBorder={false}
          className="custom-table"
        >
          <Table.Column width={100} title="发布时间" dataIndex="updateDate" />
          <Table.Column width={100} title="地区" cell={renderUserAddr} dataIndex="customer.province" />
          <Table.Column width={140} title="用户信息" cell={renderUserInfo} dataIndex="customer.nickname" />
          {/* <Table.Column width={160} title="用户鉴定次数" dataIndex="appriCount" /> */}
          <Table.Column width={100} title="单号" dataIndex="order.outerid" />
          <Table.Column
            width={100}
            title="查看图片"
            cell={renderDetailImg}
            dataIndex="order.img1" />
          <Table.Column
            width={200}
            title="状态"
            dataIndex="order.status"
            cell={renderState}
          />
          <Table.Column width={100} title="补充原因" dataIndex="order.remark" />

          <Table.Column
            width={400}
            title="操作"
            dataIndex="order.status"
            cell={renderOper}
            lock="right"
            align="center"
          />
        </Table>
        <Pagination
          className={styles.pagination}
          current={current}
          total={total}
          onChange={handlePagination}
        />
      </div>
    </div>
  );
}

